Skip to content

fix: Mouse passthrough bug, v 1.3.0beta#486

Open
ExtraBinoss wants to merge 2 commits intowebadderallorg:mainfrom
ExtraBinoss:fix/mouse-passthrough
Open

fix: Mouse passthrough bug, v 1.3.0beta#486
ExtraBinoss wants to merge 2 commits intowebadderallorg:mainfrom
ExtraBinoss:fix/mouse-passthrough

Conversation

@ExtraBinoss
Copy link
Copy Markdown
Collaborator

@ExtraBinoss ExtraBinoss commented May 9, 2026

Fixing mouse passthrough

Description

Mouse doesn't passthrough , wether recording or not.
This issue has been confirmed not to be related to resolution / dual monitor setup

What has been done here

  1. Fixed Mouse Passthrough Corruption (Windows 11+)
    Files: electron/windows.ts, electron/ipc/register/sources.ts
    Change: Added reassertHudOverlayMousePassthrough(). This function forces a reset of the native WS_EX_TRANSPARENT flag.
    Rationale: On Windows 11, creating ephemeral windows (like the source highlight rectangle) often silently breaks the HUD's hover detection. We now force a "repair" of this state whenever a highlight appears or disappears.

  2. Eliminated Focus Stealing
    File: electron/windows.ts
    Change: Set the HUD overlay window to focusable: false.
    Rationale: This fixes the issue where clicking a HUD button would cause background apps (like Discord or games) to freeze, turn black, or stop showing a blinking text cursor. The HUD now receives clicks without becoming the "Active" window in the OS.

  3. Intelligent Interaction Tracking (DOM Raycasting)
    File: useLaunchHudInteractionState.ts
    Change: Replaced local onMouseEnter/Leave events with a global mouseover listener that dynamically checks if the target (target.closest) is an interactive element (the bar, Radix popovers, or the webcam preview).
    Rationale: This allows the HUD to track the mouse even when it moves into popovers rendered via Portals (which sit outside the main bar's DOM hierarchy).

  4. Immediate Mouse Release & Auto-Close
    Files: useLaunchHudInteractionState.ts, LaunchPopoverCoordinator.tsx
    Change: The HUD now enables click-through (ignoreMouseEvents: true) immediately when the mouse leaves interactive areas, even if a menu is open. We added a window.blur listener to handle closing the menus when the user clicks another application.
    Rationale: This ensures that users can click on background apps (like Discord) instantly, without the HUD "swallowing" the first click to close itself.
    In summary: These changes make the HUD overlay completely transparent to the OS when not in use, and ensure it never disrupts the user's focus or workflow in other applications.

Type of Change

  • Bug Fix

Related Issue(s)

Mouse passthrough bug, v 1.3.0beta #479
Reported from discord. and happened to me too. on Windows 11 latest version

Testing Guide

Run the app npm run dev You should for example, if you are on Youtube, and you are on a video, if you switch sources, the popover shouldn't make the video go black

Other example, with Recordly open, try going into an input box, it should continue to trigger the little marker of where you are typing (blinking caret). This was not possible before the fix as the popovers and most of the HUD would not be seen as transparent.

Summary by CodeRabbit

  • Bug Fixes
    • Improved HUD overlay mouse interaction on Windows to prevent persistent click-through and forwarding issues
    • Reapplies passthrough when source highlights are shown and after they close
    • Better detection of pointer over interactive HUD elements to avoid premature ignore-mouse state
    • Launch popovers now close automatically when the application window loses focus

Review Change Stack

Copilot AI review requested due to automatic review settings May 9, 2026 21:48
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 9, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: f4bc6217-2dd5-4a37-9ef4-7ce1efaed79f

📥 Commits

Reviewing files that changed from the base of the PR and between 13e3d2b and 46c7115.

📒 Files selected for processing (3)
  • src/components/launch/LaunchWindow.tsx
  • src/components/launch/hooks/useLaunchHudInteractionState.ts
  • src/components/launch/popovers/PopoverScaffold.tsx
✅ Files skipped from review due to trivial changes (2)
  • src/components/launch/popovers/PopoverScaffold.tsx
  • src/components/launch/LaunchWindow.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/launch/hooks/useLaunchHudInteractionState.ts

📝 Walkthrough

Walkthrough

Tracks pointer presence over HUD interactive elements, marks HUD window non-focusable, adds reassertHudOverlayMousePassthrough() to retoggle passthrough on Windows, calls it during highlight-window lifecycle, and closes popovers on window blur.

Changes

HUD Overlay Mouse Passthrough System

Layer / File(s) Summary
HUD Window Options
electron/windows.ts
HUD overlay window gains focusable: false.
Passthrough Reassertion Helper
electron/windows.ts
New exported reassertHudOverlayMousePassthrough() toggles setIgnoreMouseEvents off then back on with forwarding, on Windows when supported.
Mouse Position Tracking
src/components/launch/hooks/useLaunchHudInteractionState.ts, src/components/launch/LaunchWindow.tsx, src/components/launch/popovers/PopoverScaffold.tsx
Adds isMouseOverHudRef and a global mouseover listener; hudOverlaySetIgnoreMouse decisions now depend on pointer presence and drag/preview state. Adds data-hud-interactive attributes to HUD interactive elements.
Highlight Window Integration
electron/ipc/register/sources.ts
Highlight-window handler imports and calls reassertHudOverlayMousePassthrough() immediately after creation, schedules it with the auto-close, and calls it on the window closed event.
Popover Window-Blur Handling
src/components/launch/popovers/LaunchPopoverCoordinator.tsx
Provider registers window "blur" listener that clears openId to close open popovers on focus loss.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • webadderallorg/Recordly#157: Modifies HUD mouse-passthrough and platform-support checks in electron/windows.ts.
  • webadderallorg/Recordly#163: Related floating webcam-preview and HUD interaction changes that add DOM hooks and drag/preview behavior.
  • webadderallorg/Recordly#431: Prior changes to HUD overlay passthrough and desktop-source logic touching electron/windows.ts and electron/ipc/register/sources.ts.

Suggested labels

Checked

Suggested reviewers

  • Copilot

Poem

🐇 A little rabbit hops by the HUD light,
Nudges passthrough on, then off for a night.
It watches the pointer, then gives a small cheer—
"No more stray clicks, the overlay's clear!" ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'fix: Mouse passthrough bug, v 1.3.0beta' directly summarizes the main change—addressing a mouse passthrough bug on Windows 11 with a version indicator.
Description check ✅ Passed The description covers all critical template sections: a clear problem statement, detailed explanation of changes with rationale, type of change marked as Bug Fix, related issue linked, and comprehensive testing guidance.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/launch/hooks/useLaunchHudInteractionState.ts (1)

29-59: 💤 Low value

Consider moving timeoutRef declaration before its first usage for clarity.

The timeoutRef ref (declared at line 72) is referenced inside this effect's callback. While this works because React effect callbacks run after render (when all hooks are initialized), declaring refs before their usage improves readability and avoids confusion about temporal dead zones.

Additionally, the closest() selector relies on class substring matching ([class*="menuCard"], [class*="recordingWebcamPreview"]) which is fragile if class names change or if CSS modules are introduced with hashed names. Consider using data attributes for more robust element identification.

🔧 Suggested reordering and data attribute approach

Move timeoutRef declaration up:

 export function useLaunchHudInteractionState({...}) {
   const isMouseOverHudRef = useRef(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

   useEffect(() => {
     // openId effect...
   }, [openId]);

   useEffect(() => {
     const handleMouseOver = (e: globalThis.MouseEvent) => {
       // ...
     };
     // ...
   }, [isHudDraggingRef, isWebcamPreviewDraggingRef, webcamPreviewDragStartRef]);

For more robust element detection, consider adding data-hud-interactive attributes to interactive elements and simplifying the selector:

const isInteractive = !!target.closest('[data-hud-interactive], [data-radix-popper-content-wrapper]');
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/launch/hooks/useLaunchHudInteractionState.ts` around lines 29
- 59, Move the timeoutRef declaration so it appears before use in the
useEffect/handleMouseOver (ensure timeoutRef is defined above the
handleMouseOver closure), and replace fragile class-substring selectors inside
handleMouseOver's closest(...) call with a stable data attribute check such as
'[data-hud-interactive]' (keep other stable selectors like
'[data-radix-popper-content-wrapper]' if needed); update any interactive
elements to include data-hud-interactive and ensure you still clear/set
timeoutRef and call window.electronAPI?.hudOverlaySetIgnoreMouse?.(...) and
update isMouseOverHudRef, isHudDraggingRef, isWebcamPreviewDraggingRef,
webcamPreviewDragStartRef logic unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/components/launch/hooks/useLaunchHudInteractionState.ts`:
- Around line 29-59: Move the timeoutRef declaration so it appears before use in
the useEffect/handleMouseOver (ensure timeoutRef is defined above the
handleMouseOver closure), and replace fragile class-substring selectors inside
handleMouseOver's closest(...) call with a stable data attribute check such as
'[data-hud-interactive]' (keep other stable selectors like
'[data-radix-popper-content-wrapper]' if needed); update any interactive
elements to include data-hud-interactive and ensure you still clear/set
timeoutRef and call window.electronAPI?.hudOverlaySetIgnoreMouse?.(...) and
update isMouseOverHudRef, isHudDraggingRef, isWebcamPreviewDraggingRef,
webcamPreviewDragStartRef logic unchanged.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 034f1811-8586-4968-b482-c045bbd45dde

📥 Commits

Reviewing files that changed from the base of the PR and between f6a40d7 and 13e3d2b.

📒 Files selected for processing (4)
  • electron/ipc/register/sources.ts
  • electron/windows.ts
  • src/components/launch/hooks/useLaunchHudInteractionState.ts
  • src/components/launch/popovers/LaunchPopoverCoordinator.tsx

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants